import React from 'react';
import {SearchBar, Icon} from 'antd-mobile';
import Banner from "../components/Banner";
// 搜索框
const Search = () => {
  return <div style={styles.searchStyle}>
    <div style={{flex: 1}}>
      <Icon type="ellipsis" size='lg' />
    </div>
    <div style={{flex: 4}}>

      <SearchBar placeholder="搜索你感兴趣的项目" maxLength={8}/>
    </div>
    <div style={{flex: 1,justifyContent:'flex-end',display:'flex'}}>
      <Icon type="ellipsis" size='lg' />
    </div>
  </div>
}
// 服务类目
const Item = ({text})=>{
  return <div style={{width:'25%',height:78,alignItems:'center',display:'flex',flexDirection:'column',backgroundColor:'#fff',marginTop:20}}>
    <div  style={{width:'100%',height:50,textAlign:'center',background: 'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  50px 50px no-repeat' }}></div>
    <div style={{textAlign:'center',fontSize:'12px',color:'#999999',paddingTop:10}}>{text}</div>
  </div>
}
const Items = () => {
  return <div style={{display:'flex',flexDirection:'row',flexWrap:'wrap',paddingLeft:'5%',paddingRight:'5%'}}>
    <Item text='足疗'/>
    <Item text='SPA'/>
    <Item text='针灸'/>
    <Item text='拔罐'/>
    <Item text='推拿'/>
    <Item text='按摩'/>
    <Item text='美容'/>
    <Item text='更多'/>
  </div>
}

// 限时折扣
export default class HomePage extends React.Component {
  render() {
    return (<div style={{backgroundColor: 'white', height: '100%'}}>
      <Search/>
      <Banner/>
      <Items/>
    </div>)
  }
}


const styles = {
  searchStyle: {
    display: 'flex',
    justifyContent: 'space-between',
    height: 50,
    backgroundColor: '#f5f5f5',
    alignItems: 'center',
    paddingLeft:'5%',
    paddingRight:'5%'
  }
}
